/*
 * @Author: Jim <jimjiang0909@gmail.com>
 * @Create time:   2016-08-22 13:32:20
 * @Last Modified by:   Jim
 * @Last Modified time: 2016-08-30 10:56:47
 * @File Name: select.js
 */

'use strict';

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Text,
    ListView,
    RecyclerViewBackedScrollView,
    TouchableOpacity,
} from 'react-native';

let { width, height } = Utils.size;
import Icon from 'react-native-vector-icons/Ionicons';
import PickerModal from '../common/pickerModal';

export default class MultipleSelect extends Component {
    constructor(props) {
        super(props);

        this.state = {
            ds: new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
            value: this.props.value || '',
        };
    }

    render() {
        return (
            <PickerModal
                 navTitle={this.props.title}
                 modalVisible={true}
                 onPickerModalCancel={ () => this.props.callbackCancel() }
                 save={false}
                >
                <View style={ this.props.data.length > 6 ? [styles.modalBox, styles.modalMaxHeight] : styles.modalBox}>            
                    <ListView
                      dataSource={this.state.ds.cloneWithRows(this.props.data)}
                      initialListSize={10}
                      pageSize={10}
                      renderRow={this.renderRow.bind(this)}
                      renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />}
                    />              
                </View>
             </PickerModal>  
            )
    }

    renderRow(rowData) {
        let selected = this.state.value == rowData.value;
        return (
            <TouchableOpacity style={styles.itemView} activeOpacity={1} onPress={ () => this.props.callbackSave(rowData.value) }>
                <Text style={ selected ? [styles.itemText, styles.itemTextAction] : styles.itemText }>{rowData.label}</Text>
                { selected ? <Icon name="ios-checkmark" style={styles.itemTextAction} size={40}/> : null} 
            </TouchableOpacity>
        )
    }

}

const styles = StyleSheet.create({
    modalBox: {
        width: width,
        overflow: 'hidden',
    },

    modalMaxHeight: {
        height: 280,
    },

    itemView: {
        borderBottomWidth: 1,
        borderBottomColor: '#DEDDDD',
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 20,
        paddingRight: 20,
    },

    itemText: {
        height: 45,
        width: 280,
        lineHeight: 35,
        color: '#878787',
        fontSize: 15,
    },

    itemTextAction: {
        color: '#56ade0',
    },
});